<template>
	<view class="flex flex-wrap">
		<view v-for="(item,index) in imageList" :key="index" style="width: 230rpx;"
			class="flex align-center justify-center pt-2 position-relative">
			<image :src="item.fileSuffix" style="width: 210rpx;height: 210rpx;" class="bg-light rounded"
				@click="preview(item.fileSuffix)">
			</image>
			<!-- {{item.fileSuffix}} -->
			<view class="flex align-center justify-center rounded-circle"
				style="width: 60rpx;height: 60rpx;position: absolute;top: 1rpx;right: 10rpx;background-color: rgba(0,0,0,0.5);"
				@click="deleteImage(item)">
				<uv-icon name="close" size="28"></uv-icon>
			</view>
		</view>
		<view v-if="imageList.length < limit" style="width: 230rpx;" class="flex align-center justify-center"
			@click="chooseImage">
			<view class="flex align-center justify-center bg-light rounded" style="width: 210rpx;height: 210rpx;">
				<text v-if="!upload" class="text-light-muted" style="font-size: 100rpx;">+</text>
				<progress v-else :percent="progress" stroke-width="3" />
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/lib/request.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			limit: {
				type: Number,
				default: 1
			}

		},
		data() {
			return {
				imageList: [],
				upload: false,
				progress: 40
			}
		},
		mounted() {
			this.imageList = this.list
		},
		methods: {
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: this.limit - this.imageList.length,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						// // 上传
						res.tempFilePaths.forEach(path => {
							this.upload = true
							$H.uploadWithToken('/api/serverplat/wechat/uploadFile', {
								filePath: path
							}, (progress) => {
								console.log('上传进度', progress);
								this.progress = progress
							}).then((res) => {
								console.log(res, 'resresres')
								this.upload = false
								let obj = res[0]
								this.imageList.push(obj)
								this.$emit('update', this.imageList)
							})
						})
					}
				})
			},
			// 预览图片
			preview(item) {
				console.log(item, 'item')
				uni.previewImage({
					current: item,
					urls: [item]
				})
			},
			// 删除图片
			deleteImage(item) {
				uni.showModal({
					content: '是否要删除该图片？',
					success: (res) => {
						if (res.confirm) {
							let index = this.imageList.findIndex(url => url === item)
							if (index !== -1) {
								this.imageList.splice(index, 1)
								this.$emit('update', this.imageList)
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
</style>